Bardzo pomocnymi i u¿ytecznymi obiektami, pojawiaj¹cymi siê czêsto na stronach WWW s¹ formularze. Pozwalaj¹ one u¿ytkownikowi na interaktywne reagowanie na to, co umieszczone zosta³o w dokumencie. Czêsto wykorzystywane jest to w przypadkach, gdy przyk³adowo zamawia siê jakieœ produkty danej firmy czy te¿ zbiera siê uwagi i spostrze¿enia u¿ytkownika na temat ogl¹danej przez niego strony WWW. Przyk³ad prostego formularza:
<FORM ACTION=script.sh> <SELECT> <OPTION> opcja pierwsza <OPTION> opcja druga </SELECT> </FORM>
Element <FORM>...</FORM>, wystêpuj¹cy w powy¿szym przyk³adzie wyznacza „obszar" formularza w dokumencie. Wewn¹trz jego ograniczników mo¿e wyst¹piæ kolejny element <FORM>.
Ogranicznik wprowadzaj¹cy zawiera zwykle atrybuty METHOD oraz ACTION. Pierwszy z nich okreœla metodê, która bêdzie stosowana do komunikowania siê z serwerem. Mo¿e ona przybieraæ dwie wartoœci: GET (domyœlna), któr¹ stosuje siê, gdy baza danych serwera musi pozostaæ w stanie niezmienionym (np. podczas wyszukiwania), oraz POST, zmieniaj¹ca struktury bazy danych serwera (np. rejestracja nowego u¿ytkownika).
Drugi atrybut wskazuje na wykonywalny program lub specjalny skrypt, który ma za zadanie obs³ugiwaæ zdefiniowany formularz. Zwykle jest to zbiór, maj¹cy podobne znaczenie jak plik typu .BAT w systemie DOS. Na serwerze umieszczony jest on w katalogu cgi-bin. Powinien on reagowaæ na dane wystêpuj¹ce w formularzu, podane przez u¿ytkownika. W momencie, gdy parametr atrybutu ACTION nie zostanie okreœlony, przyjmowana jest jego wartoœæ domyœlna, wskazuj¹ca na sam dokument, zawieraj¹cy formularz.
Podobnie jak to by³o w przypadku map graficznych, niezbêdne jest tutaj zainstalowanie oprogramowania HTTP na komputerze serwuj¹cym dokumenty WWW. Bez niego ¿¹dania klienta nie bêd¹ spe³niane. Formularze mo¿na jednak bez problemu edytowaæ bez wspó³pracy z takim serwerem, choæ przetestowanie dzia³ania samego skryptu obs³uguj¹cego formularz nie bêdzie mo¿liwe.
W zaprezentowanym ju¿ przyk³adzie zosta³ równie¿ przedstawiony element <OPTION>. Dalsze elementy zostan¹ omówione poni¿ej.
Jako wprowadzenie do zagadnieñ dotycz¹cych formularzy niech pos³u¿y nastêpuj¹cy przyk³ad:
<HTML> <HEAD> <TITLE>Przyk³adowy formularz </TITLE> </HEAD> <BODY> <H1>Formularz zamówienia</H1> Proszê wype³niæ poni¿szy formularz. Umo¿liwi on Pañstwu zamówienie naszego katalogu. <FORM METHOD="POST" ACTION=test.sh> <P> Imiê: <INPUT NAME=imie SIZE=20> Nazwisko: <INPUT NAME=nazwisko SIZE=20> <P> Adres:<BR> <TEXTAREA NAME=adres ROWS=5 COLS=60> </TEXTAREA> <P> Katalog powinien zostaæ dorêczony przez: <SELECT NAME=forma> <OPTION VALUE=poczta> pocztê <OPTION VALUE=prywatny> prywatnych przewoŸników <OPTION VALUE=indywidualnie> odbiór indywidualny </SELECT><BR> <P> <INPUT TYPE=submit VALUE=TAK> <B>Chcê zamówiæ katalog!</B> <P> <INPUT TYPE=reset VALUE=NIE> Nie chcê katalogu! </FORM> </BODY> </HTML>
Dokumenty, podobne do powy¿szego, masowo wystêpuj¹ w sieci WWW. Wiele powa¿nych firm docenia ich zalety i wykorzystuje je jako wygodny sposób dystrybucji swoich produktów.
Przyk³adowy formularz zamówienia gotowy do wys³ania
Podstawowym elementem wprowadzaj¹cym dane do formularzy jest <INPUT>. Za jego pomoc¹ mo¿na definiowaæ listy wyboru, pola danych, przyciski oraz obrazki, bêd¹ce jednoczeœnie odwo³aniami (czymœ w rodzaju map graficznych). Zwykle przypisany jest mu atrybut NAME wraz ze znacz¹c¹ nazw¹ zmiennej, jednoznacznie okreœlaj¹c¹ dany obiekt. Gdy formularz zostanie wys³any, zmiennej tej zostanie przypisana wartoœæ podana przez u¿ytkownika. Przyk³ad:
<INPUT TYPE=checkbox NAME=box1 VALUE=czekolada> czekolada
Powy¿szemu elementowi zosta³a przydzielona nazwa box1. Gdy zostanie on wybrany kursorem, po potwierdzeniu formularza wysy³any jest ci¹g znaków w postaci pary zmienna=wartoœæ (na przyk³ad box1=czekolada). Za analizê takiej pary odpowiedzialny jest ju¿ sam program, którego nazwa zosta³a podana jako parametr atrybutu ACTION.
Wykorzystuj¹c z kolei atrybut TYPE, mo¿na okreœliæ specyficzne w³aœciwoœci elementu. Mog¹ mu zostaæ przypisane wartoœci opisane poni¿ej.
Wartoœæ checkbox umo¿liwia zdefiniowanie jednego lub kilku pól wyboru. Ka¿de z nich posiada swoj¹ w³asn¹ nazwê i nie zale¿y od pól pozosta³ych. Przyk³ad:
<FORM> <INPUT TYPE=checkbox NAME=box1>pierwsze pole <INPUT TYPE=checkbox NAME=box2>drugie pole </FORM>
Pola wyboru s¹ wyœwietlane jako ma³e kwadraty. Po wybraniu danego pola pojawia siê w nim krzy¿yk (porównaj zrzut ekranowy).
Z kolei typ hidden mo¿e niezale¿nie od jakichkolwiek danych wejœciowych przesy³aæ do serwera ró¿ne pary typu zmienna=wartoœæ. W tym momencie
przegl¹darka nie pokazuje niczego w oknie. Ten typ najczêœciej s³u¿y do kontrolowania obs³ugi formularzy. Na przyk³ad:
<INPUT TYPE=hidden NAME=ukryty VALUE=wartoϾ>
Za pomoc¹ typu image w formularzu mog¹ byæ równie¿ umieszczane obrazki. Przypisywane jest im podobne znaczenie, jak mia³o to miejsce w przypadku elementu <IMG> oraz map graficznych. Jak ju¿ wiemy, element ten mo¿e pos³u¿yæ jako parametr elementu <A>, co powoduje, ¿e obrazek mo¿na wybraæ mysz¹. Podobn¹ sytuacjê mamy równie¿ w przypadku etykiety <INPUT> z t¹ ró¿nic¹, ¿e obrazki nie wskazuj¹ na inne dokumenty czy pliki, tylko s³u¿¹ do przes³ania pewnych danych z formularza do serwera. Na przyk³ad:
<INPUT TYPE=image SRC=obrazek.gif NAME=obrazek>
Gdy zdefiniowany w ten sposób obrazek zostanie wskazany kursorem myszy, zmienna „obrazek", wystêpuj¹ca w formularzu, zostanie wys³ana wraz ze
wspó³rzêdnymi kursora myszy (liczonymi w pikselach od lewego, górnego rogu).
Kolejny typ radio, w przeciwieñstwie do checkbox, umo¿liwia uaktywnienie tylko jednego wariantu spoœród wielu. Jest on zatem stosowany wszêdzie tam, gdzie
powinna byæ wybrana tylko jedna opcja. Przyk³ad:
<INPUT TYPE=radio NAME=opcje VALUE=rb1>opcja pierwsza<BR> <INPUT TYPE=radio NAME=opcje VALUE=rb2>opcja druga<BR>
Wszystkim elementom nale¿¹cym do jednej grupy musi zostaæ przedzielona taka sama nazwa (w tym przypadku „opcje").
Sposób wyœwietlania i zachowania siê dwóch wybranych typów elementu <INPUT>
Wype³nione pola danych s¹ przekazywane programowi wyspecyfikowanemu w elemencie <FORM>. Do tego celu s³u¿y specjalny typ submit, który wskazuje na przycisk inicjuj¹cy wys³anie danych z formularza. Przyk³ad:
<INPUT TYPE=submit>
W ten sposób zosta³ zdefiniowany przycisk, na którym widnieje napis Submit. Poniewa¿ jednak zwykle jest on niezrozumia³y dla przeciêtnych u¿ytkowników, na przycisku mo¿na umieœciæ inny dowolny tekst. Do tego celu mo¿e nam pos³u¿yæ atrybut VALUE. Np.:
<INPUT TYPE=submit VALUE=Wyœlij>
Gdy u¿ytkownik wciœnie taki przycisk, to automatycznie zostan¹ wys³ane wszystkie zmienne formularza wraz z podanymi wartoœciami. Za ich pobranie i wygenerowanie odpowiedzi odpowiedzialny jest ju¿ sam program obs³uguj¹cy formularz. Kilka dodatkowych szczegó³ów na ten temat znajduje siê w podrozdziale „Przetwarzanie formularzy".
Oczywiœcie czytelnik mo¿e zrezygnowaæ z wys³ania formularza. Wystarczy bowiem wcisn¹æ przycisk, któremu zosta³ przypisany typ reset. Przyk³ad:
<INPUT TYPE=reset>
Równie¿ i tutaj mo¿na ustaliæ inny napis na przycisku. Na przyk³ad:
<INPUT TYPE=reset VALUE=Koniec>
Wykorzystanie przycisków Submit oraz Reset
Na prezentowanym poni¿ej zrzucie ekranowym przyciski Submit oraz Reset zosta³y przypisane do prostego formularza umo¿liwiaj¹cego zamawianie pizzy.
Za pomoc¹ dot¹d opisanych elementów mo¿na tworzyæ ju¿ ca³kiem funkcjonalne formularze. Brakuje nam jeszcze mo¿liwoœci wprowadzania tekstu (np. nazwiska). Do tego celu s³u¿y typ text (dla elementu <INPUT>). Tak jak inne typy, równie¿ i on posiada swój identyfikator. Dodatkowo przy u¿yciu atrybutu SIZE mo¿na okreœliæ d³ugoœæ pola danych, do którego wprowadzany bêdzie tekst. Maksymalna d³ugoœæ ci¹gu znaków podawanych przez u¿ytkownika mo¿e byæ okreœlona za pomoc¹ MAXLENGTH. Standard HTML 2.0 jako górn¹ jej granicê dopuszcza 1024 znaki. W standardzie SGML maksymalna wartoœæ wynosi jedynie 240 znaków. Przyk³ad:
<INPUT TYPE=text NAME=Imiê SIZE=20>
Podobnie do elementu text dzia³a typ password. Pozwala on autorom dokumentów HTML na kontrolê dostêpu do ich zasobów (przykladowo tylko dla zarejestrowanych u¿ytkowników). Jego parametry s¹ identyczne z typem text. Jedyna ró¿nica polega na tym, ¿e wpisywany tekst nie bêdzie wyœwietlany w polu (zwykle ka¿dy znak jest zastêpowany przez „*"). Przyk³ad:
<INPUT TYPE=password NAME=haslo SIZE=20 >
Kilka atrybutów elementu <INPUT> zosta³o ju¿ omówionych. Poni¿ej jeszcze raz przedstawiamy pe³n¹ ich listê w skróconej formie:
Tabelka atrybutów elementu <INPUT>
Element <SELECT> pozwala, podobnie jak <INPUT TYPE=radio>, na wybranie jednej spoœród kilku pozycji. Mamy tu jednak do dyspozycji trochê wiêcej mo¿liwoœci, dziêki atrybutom MULTIPLE oraz SIZE.
Element ten s³u¿y jako „ramka" dla etykiet <OPTION>, okreœlaj¹cych poszczególne klasy wyboru, przy tym nadawany jest mu jednoznaczny identyfikator, który automatycznie przydzielany jest równie¿ wszystkim elementom listy. Przyk³ad:
<FORM> <SELECT NAME=Bomby kaloryczne> <OPTION>Tort z bit¹ œmietan¹ <OPTION>Chipsy <OPTION>Cola <OPTION>Pizza <OPTION>Frytki </SELECT> </FORM>
W zale¿noœci od u¿ycia ró¿nych atrybutów dla elementu <SELECT> okno wyboru mo¿e przybieraæ ró¿n¹ postaæ. Z listy mo¿e byæ wybrany zarówno jeden, jak i wiele elementów jednoczeœnie. W tym drugim przypadku musi zostaæ podany dodatkowo bezparametrowy atrybut MULTIPLE. Sposób, w jaki przeprowadzany bêdzie na ekranie wybór wielu pozycji naraz, jest uzale¿niony od œrodowiska, w jakim pracuje przegl¹darka. Na przyk³ad w przypadku programu Netscape, pracuj¹cym pod Windows wiele pozycji mo¿e byæ wybranych za pomoc¹ przesuniêcia kursorem myszy (z wciœniêtym jej lewym przyciskiem) po kolejnych pozycjach. Druga mo¿liwoœæ to zaznaczanie wybranych elementów z wciœniêtym klawiszem Ctrl (dla pozycji nie znajduj¹cych siê bezpoœrednio obok siebie).
Umieszczone powy¿ej dwa pierwsze rysunki pokazuj¹ u¿ycie atrybutu MULTIPLE bez opcji SIZE. Zastosowanie tego drugiego pozwala na okreœlenie jednoczeœnie pokazywanej na ekranie liczby pozycji w liœcie. Gdy dla elementu <SELECT> zosta³a wybrana wiêksza liczba opcji, dla ka¿dej z nich wysy³ana jest osobna para typu zmienna-wartoœæ. Wiêcej szczegó³ów na ten temat znajduje siê w kolejnym podrozdziale.
Mo¿liwoœci wykorzystania elementu <OPTION> zosta³y przedstawione powy¿ej. Teraz wyjaœnimy dzia³anie charakteryzuj¹cych go atrybutów. W specyfikacji standardu HTML 2.0 przewidziano dla niego trzy atrybuty:
Przyk³ad:
<OPTION SELECTED> Ciastko
Pozycja „Ciastko" bêdzie w tym przypadku wybrana domyœlnie i podczas wys³ania formularza zostanie wys³any identyczny ci¹g znaków.
Z kolei w przyk³adzie:
<OPTION VALUE=Tort> Ciastko
wprawdzie na ekranie pojawi podobny napis do poprzedniego, jednak do serwera zostanie wys³ana wartoœæ „Tort".
Pole selekcji przed i po klikniêciu mysz¹
Komfortowe wprowadzanie tekstu za pomoc¹ <TEXTAREA>
Czêsto w dokumentach HTML wystêpuje potrzeba udostêpnienia u¿ytkownikowi trochê wiêkszej iloœci miejsca do wprowadzania tekstów (na przyk³ad w celu wpisania kompletnego adresu czy te¿ uwag o dokumencie). Na przyk³ad:
<TEXTAREA NAME=adres COLS=40 ROWS=6>Jan Kowalski ul. Wiejska 32/12 62-203 W-wa </TEXTAREA>
Elementowi <TEXTAREA> równie¿ towarzyszy wiele atrybutów. Najwa¿niejsz¹ spraw¹ jest jednak to, i¿ na ekranie mo¿na wyœwietlaæ maksymalnie 1024 znaki i taka sama liczba jest przesy³ana w formularzu. W zaprezentowanym przyk³adzie okno tekstowe zosta³o ju¿ wstêpnie wype³nione, naturalnie mo¿e byæ ono dodatkowo edytowane.
Tak jak i wiêkszoœæ obiektów formularza, równie¿ i ten posiada atrybut NAME, oznaczaj¹cy jednoznaczny identyfikator. W naszym przyk³adzie przypisany jest
mu ci¹g „adres". Za pomoc¹ atrybutów COLS (kolumny) oraz ROWS (wiersze) mo¿na zdefiniowaæ, ile wierszy i kolumn powinno byæ wyœwietlane w
dokumencie. Przy oknie tekstowym umieszczane s¹ wtedy pionowe i poziome belki przewijania tekstu.
{N}Program Netscape wprowadzi³ jeszcze jeden dodatkowy atrybut umo¿liwiaj¹cy automatyczne przenoszenie tekstu do nastêpnej linii. Atrybut WRAP
standardowo ustawiany jest na off. Gdy jednak przydzieli siê mu wartoœci virtual lub phisical, s³owa nie mieszcz¹ce siê na koñcu linii s¹ przenoszone do linii
nastêpnej. Ró¿nica pomiêdzy tymi dwoma wariantami polega na tym, ¿e virtual wysy³a zawartoœæ okna tekstowego w standardowej postaci (z d³ugimi liniami), a
phisical w takiej formie, jaka prezentowana jest na ekranie (automatycznie do³¹cza znaki koñca wiersza).
Przedstawiony przez nas przyk³ad formularza po zainicjowaniu jego przes³ania (wciœniêty przycisk submit) mo¿e przyk³adowo przekazaæ programowi script.sh nastêpuj¹cy meldunek:
imie=Jan&nazwisko=Kowalski&adres=%0D%0A&forma=poczta
Jak widaæ, kolejne identyfikatory i wartoœci s¹ zestawione w jedn¹ ca³oœæ. Poszczególne pary s¹ rozgraniczane znakiem „&". Z takiego wiersza danych musz¹ zostaæ wyodrêbnione zmienne i ich wartoœci. S¹ one póŸniej przetwarzane i analizowane, po czym generowana jest odpowiedŸ, ukazuj¹ca siê w oknie przegl¹darki jako odrêbny dokument.
Programy obs³uguj¹ce formularze nie musz¹ stanowiæ przekompilowanych zbiorów binarnych (choæ jest to polecane z racji swej elastycznoœci i uniwersalnoœci). Wystarcz¹ krótkie programy skryptowe, na przyk³ad shell script (UNIX) czy te¿ pliki typu batch (DOS). S¹ one zwykle umieszczane w specjalnym katalogu, znajduj¹cym siê na serwerze o nazwie cgi-bin, sk¹d w odpowiednim momencie s¹ uruchamiane przez oprogramowanie serwera WWW.
